<template>
    <el-menu :default-active="path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#304156" text-color="#FFF" unique-opened router>
        <el-menu-item index="/index">
            <i class="iconfont homepage"></i>
            <span>首页</span>
        </el-menu-item>
        <el-sub-menu :index="`/${p.name}`" v-for="p in store.activeMenus " :key="p.id">
            <template #title>
                <i class="iconfont" :class="p.icon"></i>
                <span>{{ p.title }}</span>
            </template>
            <el-menu-item :index="`/${p.name}/${sub.name}`" v-for="sub in p.chidren" :key="sub.id">
                <i class="iconfont" :class="sub.icon"></i>
                <span>{{ sub.title }}</span>
            </el-menu-item>

        </el-sub-menu>

    </el-menu>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store"
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute()
let path = ref(route.path)
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(route.path);
    // console.log(store.menus);


}
const handleClose = (key: string, keyPath: string[]) => {


    // console.log(key, keyPath)
}
const store = useUserStore()

// console.log("path" + route.path);

watch(() => route.path,
    (newValue, oldValue) => {
        path.value = newValue
    });
// setTimeout(() => {

//     console.log(store.activeMenus);
// }, 2000)

</script>

<style scoped>

</style>